
import React from 'react';
import { ContentState } from 'draft-js';
import { Button, Popover, Input } from 'antd';

interface Props {
    contentState: ContentState
    children: any
}

interface State {
    open: boolean
}

export default class CustomInlineInputEl extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
    };

    public inputRef: any = null;
    public readonly state: Readonly<State> = {
        open: false
    };

    onPopoverMouseDown(e: any) {
        e.preventDefault();
        e.stopPropagation();
    };

    onClickPopover(e: any) {
        this.inputRef.focus();
        e.preventDefault();
        e.stopPropagation();
        return false;
    };

    onInputChange(e: any) {
        console.log("onInputChange", e)
    }

    handleOpenChange() {
        this.setState({ open: !this.state.open })
    };

    render() {
        const { open } = this.state;
        const { contentState, children } = this.props;
        return (
            <Popover
                content={(
                    <div
                        className='word-inline-input-popover'
                    >
                        <div
                            onMouseDown={this.onPopoverMouseDown.bind(this)}
                            onMouseUp={this.onPopoverMouseDown.bind(this)}
                            onClick={this.onClickPopover.bind(this)}
                        >
                            <p className='word-inline-input-popover-title'>填入/修改数据</p>
                            <Input ref={(c) => this.inputRef = c} placeholder={'请输入'} />
                        </div>
                    </div>
                )}
                title=""
                trigger="click"
                open={open}
                onOpenChange={this.handleOpenChange.bind(this)}
            >
                <div
                    className='word-inline-input-wrapper'
                    // onClick={this.onClickInputWrapper.bind(this)}
                    title={'点击可进行编辑'}
                    contentEditable={false}
                >
                    {children}
                </div>
            </Popover>

        )
    }
}